<template>
  <div class="box">
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="input">
      <van-cell-group inset>
        <van-field
          v-model="value"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button v-if="!flag" size="small" type="primary" @click="fasong"
              >发送验证码</van-button
            >
            <!-- 验证码倒计时 -->
            <van-button v-if="flag" disabled size="small" type="primary">
              <div class="time">
                <van-count-down
                  :time="60000"
                  format="ss"
                  @finish="finish"
                ></van-count-down
                ><span>s后再次发送</span>
              </div>
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 10px 10px">
        <van-button
          round
          block
          :disabled="value.length != 5"
          type="primary"
          @click="resigstok"
        >
          下一步
        </van-button>
      </div>
    </div>
  </div>
  <button @click="add">tijiao</button>
</template>

<script>
import { fasongyanzm, yanzhenduanxyanzm } from "../../service/regist";
export default {
  data() {
    return {
      flag: false,
      value: "",
    };
  },
  methods: {
    //路由回退
    onClickLeft() {
      history.back();
    },
    //发送验证码
    //暂存验证码到仓库
    fasong() {
      fasongyanzm({ tel: `${this.$store.state.tel}` }).then((res) => {
        if (res.data.code === "200") {
          this.$store.commit("chanyzm", res.data.data);
          // console.log(res);
        }
      });
      //开始倒计时
      this.flag = true;
    },
    //倒计时结束
    finish() {
      this.flag = false;
    },
    //验证验证码是否ok
    resigstok() {
      yanzhenduanxyanzm({
        tel: `${this.$store.state.tel}`,
        telcode: `${this.$store.state.yanzm}`,
      }).then((res) => {
        console.log(res);
        if (res.data.code === "200") {
          this.$router.push("/regist/step3");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #f5f5f5;
  height: 100vh;
}
.input {
  margin: 10px;
}
.time {
  display: flex;
  justify-content: space-around;
}
</style>
